<template>
  <div class="drawerContent">
    <div class="header">
      <div class="jobInfo">
        <el-row>
          <el-col :span="5"><span class="attr">用户ID:</span>
            <span class="name">{{ userInfoDetails.member_id }}</span>
          </el-col>
          <el-col :span="5"><span class="attr">充值金额:</span>
            <span class="name">￥{{ formatNumber(userInfoDetails.total_amount || userInfoDetails.amount || 0 ) }}</span>
          </el-col>
          <el-col :span="5"><span class="attr">注册小程序:</span>
            <span class="name">{{ userInfoDetails.mini_app_name }}
              <svg-icon
                v-if="rowInfo.app_type==1"
                icon-class="miniapp"
                class="imageIcon"
              />
              <svg-icon
                v-else
                icon-class="douyin"
                class="imageIcon"
              />
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5"><span class="attr">注册时间:</span>
            <span class="name">{{ userInfoDetails.reg_time }}</span>
          </el-col>
          <el-col :span="5"><span class="attr">喵币余额:</span>
            <span class="name">{{ formatNumber(userInfoDetails.surplus_coin || userInfoDetails.coin || 0) }}</span>
          </el-col>
          <el-col :span="5"><span class="attr">赠币余额:</span>
            <span class="name">{{ formatNumber(userInfoDetails.surplus_free_coin || userInfoDetails.free_coin || 0) }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5"><span class="attr">用户系统:</span>
            <span
              class="name"
              style="margin-right:5px"
            >{{ userInfoDetails.system_type==1?'安卓':userInfoDetails.system_type==2 ? 'IOS' : "" }}</span><el-tooltip
              class="item"
              effect="dark"
              content="取用户最近一次登录所属系统"
              placement="bottom"
            >
              <svg-icon
                icon-class="question"
                class="question"
              />
            </el-tooltip>
          </el-col>
          <el-col :span="5"><span class="attr">添加客服号:</span>
            <span class="name">{{ userInfoDetails.customer_num }}</span>
          </el-col>
          <el-col :span="5"><span class="attr">剩余可消费集:</span>
            <span class="name">{{ formatNumber(userInfoDetails.surplus_chapter_count || userInfoDetails.surplus_chapter_count || 0) }}</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="tabContent">
      <el-tabs v-model="activeName">
        <el-tab-pane
          v-for="(item,index) in tabList"
          :key="index"
          :label="item.label"
          :name="item.value"
        >
          <component
            :is="item.value"
            v-if="activeName===item.value"
            :row-info="rowInfo"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import recharge from './userDetails/recharge.vue'
import consume from './userDetails/consume.vue'
import vip from './userDetails/vip.vue'
import dyeing from './userDetails/dyeing.vue'
import collect from './userDetails/collect.vue'
import login from './userDetails/login.vue'
import ViewLog from './userDetails/ViewLog.vue'
import refundOrder from './userDetails/refundOrder.vue'
import { userDetails } from '@/api/userPage'
import { formatNumber } from '@/utils/index'
import activeSign from './userDetails/activeSign.vue'
export default {
  name: 'UserDetails',
  components: {
    recharge,
    consume,
    vip,
    dyeing,
    collect,
    login,
    refundOrder,
    activeSign,
    ViewLog
  },
  props: ['rowInfo'],
  data() {
    return {
      formatNumber: formatNumber,
      activeName: 'recharge', // tabactive 项
      userInfoDetails: {},
      tabList: [
        { label: '充值记录', value: 'recharge' },
        { label: '消费记录', value: 'consume' },
        { label: '观看记录', value: 'ViewLog' },
        { label: '会员记录', value: 'vip' },
        { label: '染色记录', value: 'dyeing' },
        { label: '收藏记录', value: 'collect' },
        { label: '登录记录', value: 'login' },
        { label: '退款记录', value: 'refundOrder' },
        { label: '活动签到', value: 'activeSign' }
      ]
    }
  },

  mounted() {
    console.log(this.rowInfo)
    this.requestDetails()
  },
  methods: {
    requestDetails() {
      userDetails({ member_id: this.rowInfo.member_id }).then((res) => {
        this.userInfoDetails = res.data
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
.bi-log {
  ::v-deep .content-table {
    padding: 0;
  }
  ::v-deep .content-head {
    display: none;
  }
}
.drawerContent {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border-top: 1px solid rgba($color: #000000, $alpha: 0.06);
  padding: 20px;
  .header {
    max-width: 100%;
    height: auto;
    .userInfo {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      .userImage {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        margin-right: 10px;
      }
      .userName {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 32px;
        width: 200px;
        margin: 0;
        margin-right: 10px;
        .icon {
          margin-left: 12px;
          font-size: 18px;
        }
      }
      .usernameInput {
        width: 200px;
        margin-right: 10px;
        .btns {
          cursor: pointer;
        }
      }
      .phone {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        margin-right: 41px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        width: 200px;
        .phoneItem {
          display: flex;
          justify-content: center;
        }
        .icon {
          margin-left: 12px;
          font-size: 18px;
        }
      }
      .bindChanle {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        .icon {
          width: 20px;
          height: 20px;
          margin-left: 20px;
        }
      }
      .status {
        margin-left: 41px;
        display: flex;
        align-items: center;
        .switch {
          margin-left: 15px;
        }
      }
    }
    .jobInfo {
      width: 1281px;
      height: auto;
      margin-top: 10px;
      .el-row {
        height: 44px;
        display: flex;
        align-items: center;
      }
      .attr {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        margin-right: 10px;
      }
      .name {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
  }
  .tabContent {
    width: 100%;
    height: auto;
    margin-top: 20px;
  }
}
.inputItem {
  .btns {
    white-space: pre-wrap;
  }
  .submitBtn {
    margin: 0 5px;
  }

  ::v-deep .el-input {
    width: 120px;
    height: 32px;
  }
  ::v-deep .el-input__inner {
    width: 120px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #06c261;
  }
  span {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #06c261;
  }
}
</style>
